import {View, Text} from "@tarojs/components";
import {Cell, CellGroup, Empty} from "@antmjs/vantui";
import Utils from "@/utils/common";
import React, {useCallback, useEffect, useRef, useState} from "react";
import {RechargeRecordModel} from "@/common/apis/model";
import {invoiceLogsApi} from "@/common/apis/home_datasource";
import ShowUtils from "@/utils/show_utils";
import {usePullDownRefresh, useReachBottom} from "@tarojs/taro";
import LocalData from "@/common/local_data";
import LogUtils from "@/utils/log";
import AssetImage from "@/common/AssetImage";
import ListFooterStatus, {FooterStatus} from "@/components/ListFooterStatus";

definePageConfig({
  navigationBarTitleText: '预存申请记录',
  enablePullDownRefresh: true,
  onReachBottomDistance: 50,
})

export default function ApplyRecord() {
  const [items, setItems] = useState<RechargeRecordModel[]>([])
  const hasMore = useRef(false)
  const page = useRef(LocalData.startPage);
  const isRefresh = useRef(false);
  //1加载中 2.加载完成 3.没有数据了
  const [isLoadingMore, setIsLoadingMore] = useState<FooterStatus>(FooterStatus.Idle)
  const getList = useCallback(() => {
    invoiceLogsApi(page.current, isRefresh.current).then((res) => {
      if (res) {
        hasMore.current = (res.length >= LocalData.limit)
        LogUtils.info(`res-length=${res.length}`)
        if (isLoadingMore) {
          setIsLoadingMore(hasMore.current ? FooterStatus.Idle : FooterStatus.NoMoreData)
        }
        setItems(prevItems => {
          return isRefresh.current ? res : [...prevItems, ...res];
        });
      }
    })
  }, []);

  useEffect(() => {
    getList()
    return () => {
    }
  }, [getList]);
  usePullDownRefresh(() => {
    page.current = LocalData.startPage
    isRefresh.current = true
    getList()
  })

  const loadMoreFunc = useCallback(() => {
    if (!hasMore.current) return
    page.current += 1
    setIsLoadingMore(FooterStatus.Loading)
    getList()
  }, [getList]);

  useReachBottom(() => {
    LogUtils.info('reach bottom')
    if (isRefresh.current) return;
    loadMoreFunc()
  })
  return (
    <View style={{
      backgroundColor: AssetImage.bg,
      paddingLeft: '10px',
      height: '100VH',
      paddingTop: '10px',
      paddingRight: '10px',
      paddingBottom: '10px',
    }}
    >
      <View style={{
        backgroundColor: AssetImage.bg,
      }}>
        {items && !Utils.isEmpty(items) ? <View>
          <View>
            {
              items.map((e, i) => {
                return <View key={e.id} style={{margin: '10px 0'}}>
                  <RecordItem item={e} />
                </View>
              })
            }
            <View style={{display: 'flex', justifyContent: 'center', padding: '10px'}}>
              <ListFooterStatus
                status={isLoadingMore}
              />
            </View>
          </View>
        </View> : <Empty description='暂无数据' />}
      </View>
    </View>
  )
}


function RecordItem(props) {
  const item = props.item as RechargeRecordModel
  const renderCell = useCallback((value) => {
    return (<Text style={{color: 'black', fontSize: '16px'}}>{value}</Text>)
  }, []);

  return (
    <View>
      <CellGroup inset>
        <Cell title='预存金额'>
          <Text style={{color: 'red', fontSize: '16px'}}>{ShowUtils.getDefaultPrice(item.amount)}</Text>
        </Cell>
        <Cell title='开票信息'>
          {
            renderCell(`${item.title}(${item.no})`)
          }
        </Cell>
        <Cell title='发票类型'>
          {
            renderCell(`${ShowUtils.getInvoiceType(item.invoiceType)}`)
          }
        </Cell>
        <Cell title='需要的资料'>
          {
            renderCell(ShowUtils.getFileType(item.fileType))
          }
        </Cell>
        <Cell title='开票要求' label={item.note} />
      </CellGroup>
    </View>
  )
}


